<template>
  <el-upload
    v-model:file-list="fileList"
    accept=".jpg, .png, .bmp, .jpeg"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    list-type="picture-card"
    :before-upload="uploadBefore"
    :on-success="uploadSuccess"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
  },

  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
  }
  // {
  //   name: "plant-2.png",
  //   url: "/images/plant-2.png"
  // },

  // {
  //   name: "figure-1.png",
  //   url: "/images/figure-1.png"
  // },
]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
onMounted(() => {
  //   api.fileUploadApi
});
// 上传前
const uploadBefore: UploadProps["beforeUpload"] = rawFile => {
  // let fileExtension = rawFile.name.split(".").pop();
  // if (["jpg", "jpeg", "png", "bmp"].indexOf(fileExtension) == -1) {
  //   ElMessage.error("只能上传JPG、PNG、BMP格式的图片!!");
  //   // props.uploadInfo.imageUrl = props.uploadInfo.imageUrl.pop();
  //   return false;
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error("图片大小不能超过 2MB!");
  //   return false;
  // }
};
// 文件列表移除文件时的钩子
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const uploadSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  //  props.uploadInfo.imageUrl.push(URL.createObjectURL(uploadFile.raw!));
};
// 点击文件列表中已上传的文件时的钩子
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  console.log(
    "%c [ uploadFile ]-52",
    "font-size:13px; background:pink; color:#bf2c9f;",
    uploadFile
  );
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>
